<template>
  <div class="input-password">
    <el-input
      v-model="formData.password"
      type="password"
      :show-password="true"
      placeholder="请输入密码"
      @input="verifyPassWord"
    >
    </el-input>
    <div class="password-icon">
      <el-text v-if="percentage > 33 && !verifyLoading" type="success"><CircleCheck width="16px" /></el-text>
      <el-text v-if="percentage == 33 && !verifyLoading" type="danger"><CircleClose width="16px" /></el-text>
      <el-text v-if="verifyLoading" type="info"><Loading width="16px" /></el-text>
    </div>
  </div>
  <div class="password-progress">
    <el-progress v-if="percentage > 0" :percentage="percentage" :status="status">
      <template #default>
        <span>{{ format }}</span>
      </template>
    </el-progress>
  </div>
  <div class="password-tips">
    <el-text type="danger" style="font-size: 12px; display: block; line-height: 16px">要求:1.密码长度最少为8位</el-text>
    <el-text type="danger" style="font-size: 12px; display: block; line-height: 16px"
      >&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.密码必须包含数字+大小写或特殊字符</el-text
    >
  </div>
</template>
<script lang="ts" setup>
import { CircleClose, CircleCheck, Loading } from "@element-plus/icons-vue";
import { PassWordStrengthVerify } from "@/api/common/other/index";
import { ref, toRefs } from "vue";

const formData = ref<any>({
  password: "",
});
const emit = defineEmits(["inputChange"]);
const percentage = ref<number>(0);
const format = ref<string>("密码强度：弱");
const status = ref<string>("exception");
const allow = ref<boolean>(false);
const verifyLoading = ref<boolean>(false);

const verifyPassWord = (value: string) => {
  formData.value.password = value.replace(/[\s]/g, "");
  if (value == "") {
    emit("inputChange", formData.value.password, false);
    percentage.value = 0;
    return;
  }
  verifyLoading.value = true;
  PassWordStrengthVerify(formData.value.password).then((res: any) => {
    verifyLoading.value = false;
    if (res.success) {
      if (res.data == 0) {
        allow.value = false;
        percentage.value = 33;
        format.value = "密码强度：弱";
        status.value = "exception";
      }
      if (res.data == 1) {
        allow.value = true;
        percentage.value = 66;
        format.value = "密码强度：中";
        status.value = "warning";
      }
      if (res.data == 2) {
        allow.value = true;
        percentage.value = 100;
        format.value = "密码强度：强";
        status.value = "success";
      }
      emit("inputChange", formData.value.password, allow.value);
    }
  });
};

const clearPassWord = () => {
  formData.value.password = "";
  percentage.value = 0;
};
defineExpose({ clearPassWord });
</script>
<style lang="scss" scoped>
.input-password {
  display: inline-flex;
  width: 100%;
}
.password-icon {
  margin-left: 10px;
}
.password-progress {
  margin-top: 10px;
  width: 100%;
}
</style>
